<template>
  <div class="home">
    <!-- 导航 -->
    <div class="navList">
      <div class="navList-conta">
        <div class="navigation">
          <ul>
            <li>
              <div></div>
              <a href="javascript" :class="{ active: navId === -1 }">首页</a>
            </li>
            <li>
              <div></div>
              <router-link
                to="/allcategory"
                :class="{ active: navId === -2 }"
                @click="navId = -2"
                >全部</router-link
              >
            </li>
            <li v-for="nav in navList" :key="nav.id">
              <div></div>
              <a
                href="javascript:;"
                :class="{ active: navId === nav.id }"
                @click="handlerTootherPage(nav.id, nav.path)"
                >{{ nav.picUrl }}</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 轮播 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="swiperItem in swiperList.panelContents"
          :key="swiperItem.id"
        >
          <img :src="swiperItem.picUrl2" alt="" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 商品列表 -->
    <div class="imgList clearfix">
      <ul>
        <li v-for="activeItem in activeList.panelContents" :key="activeItem.id">
          <img :src="activeItem.picUrl" />
        </li>
      </ul>
    </div>

    <div class="RecommendContainer-hot clearfix">
      <div class="recommendHeader">
        <h4 class="title">{{ hotShopList.name }}</h4>
      </div>
      <div class="hotCommodity">
        <div
          class="hotCommodity-conta"
          v-for="hotShop in hotShopList.panelContents"
          :key="hotShop.id"
          @click="handlerToDetail(hotShop.productId)"
        >
          <a href="javascript:;">
            <img :src="hotShop.picUrl" />
            <h6>{{ hotShop.productName }}</h6>
            <h3>{{ hotShop.subTitle }}</h3>
            <div class="buttonSet">
              <button class="button-Details">
                查看详情
              </button>
              <button class="button-Shopping">
                加入购物车
              </button>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div
      class="RecommendContainer"
      v-for="policyItemList in policyList"
      :key="policyItemList.id"
    >
      <div class="recommendHeader">
        <h4 class="title">{{ policyItemList.name }}</h4>
      </div>
      <div class="recommendContext">
        <img class="bigImg" :src="policyItemList.panelContents[0].picUrl" @click="handlerToDetail(policyItemList.panelContents[0].productId)"/>
        <div
          class="categoryItem"
          v-for="policyItem in policyItemList.panelContents.slice(1)"
          :key="policyItem.id"
          @click="handlerToDetail(policyItem.productId)"
        >
          <div class="itemImg">
            <img :src="policyItem.picUrl" alt="" />
          </div>
          <div class="title">{{ policyItem.productName }}</div>
          <div class="desc">{{ policyItem.subTitle }}</div>
          <div class="detailAndCart">
            <p class="price"><span>¥</span>{{ policyItem.salePrice }}</p>
            <div class="btn">
              <input class="detail" type="button" value="查看详情" />
              <input class="cart" type="button" value="加入购物车" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新品发布 -->
    <ul class="newProduct">
      <li v-for="active in active_two.panelContents" :key="active.id">
        <img :src="active.picUrl" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Swiper from "swiper/js/swiper";
import "swiper/css/swiper.css";
export default {
  name: "Home",
  data() {
    return {
      navId: -1,
    };
  },
  mounted() {
    this.getNavList();
    this.getSwiperList();
  },
  computed: {
    ...mapState({
      navList: (state) => state.home.navList,
      swiperList: (state) => state.home.homeInfo[0] || {},
      activeList: (state) => state.home.homeInfo[1] || {},
      hotShopList: (state) => state.home.homeInfo[2] || {},
      policyList: (state) => state.home.homeInfo.slice(3, 6) || {},
      active_two: (state) =>
        state.home.homeInfo[state.home.homeInfo.length - 1] || {},
    }),
  },
  watch: {
    swiperList: {
      immediate: true,
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          new Swiper(".swiper-container", {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },

            // 如果需要前进后退按钮
            // navigation: {
            //   nextEl: ".swiper-button-next",
            //   prevEl: ".swiper-button-prev",
            // },

            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  },
  methods: {
    getNavList() {
      this.$store.dispatch("getNavList");
    },
    getSwiperList() {
      this.$store.dispatch("getSwiperList");
    },
    // 去全部商品页
    toAllCategory() {
      this.$router.push("/allcategory");
    },
    //去捐赠页
    toDonation() {
      this.$router.push("/donation");
    },
    //点击导航去其他页面
    handlerTootherPage(navItemId, navItemPath) {
      this.navId = navItemId;
      console.log(navItemPath)
      // this.$router.push(`${navItemPath}`);
    },
    //跳转详情页
    handlerToDetail(shopId){
      this.$router.push(`/detail/${shopId}`)
    }
  },
};
</script>

<style lang="less">
.home {
  background-color: #ededed;
}
.navList {
  width: 100%;
  height: 90px;
  background-color: #f7f7f7;
  .navList-conta {
    width: 1220px;
    margin: 20px auto;
    .navigation {
      padding: 31px 0;
      ul {
        li {
          float: left;
          margin-right: 10px;
          div {
            float: left;
            margin-top: 10px;
            top: 13px;
            width: 2px;
            height: 2px;
            background: #bdbdbd;
          }
          a {
            margin-left: 11px;
            display: block;
            padding: 0 10px;
            font-size: 14px;
            &.active {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
.swiper-container {
  width: 1220px;
  height: 100%;
  .swiper-slide {
    img {
      display: block;
      width: 1220px;
      height: 500px;
      text-align: center;
    }
  }
}
.imgList {
  // padding-left: 150px;
  // margin: 20px 0;
  width: 1250px;
  margin: 0 auto;
  ul {
    li {
      float: left;
      img {
        margin: 10px 0;
        border: 1px solid #d4d4d4;
        border-radius: 8px 8px 0 0;
        display: block;
        width: 305px;
        height: 200px;
      }
    }
  }
}
.RecommendContainer {
  width: 1250px;
  height: 950px;
  /* background-color: #bcbcbc; */
  margin: 0 auto;
  margin-top: 20px;
}
.RecommendContainer-hot {
  width: 1250px;
  /* background-color: #bcbcbc; */
  margin: 0 auto;
  margin-top: 20px;
  .hotCommodity {
    height: 430px;
    .hotCommodity-conta {
      width: 50%;
      background: #fff;
      transition: all 0.5s;
      height: 430px;
      float: left;
      &:hover {
        transform: translateY(-3px);
        box-shadow: 1px 1px 20px #999;
      }
      a {
        display: block;
        img {
          margin: 50px auto 10px;
          width: 206px;
          height: 206px;
          display: block;
        }
        h6 {
          font-weight: 400;
          font-size: 16px;
          color: #424242;
          margin: 0 auto;
          padding: 0 14px;
          text-align: center;
          overflow: hidden;
        }
        h3 {
          text-align: center;
          line-height: 1.2;
          font-size: 12px;
          color: #d0d0d0;
          padding: 10px;
        }
        .buttonSet {
          text-align: center;
          line-height: 30px;
          color: #d44d44;
          font-family: Arial;
          font-size: 18px;
          font-weight: 700;
          .button-Details {
            width: 100px;
            height: 30px;
            line-height: 28px;
            vertical-align: middle;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            font-size: 12px;
            color: #646464;
            background-color: #f9f9f9;
            background-image: linear-gradient(180deg, #fff, #f9f9f9);
          }
          .button-Shopping {
            margin-left: 8px;
            width: 100px;
            height: 30px;
            line-height: 28px;
            vertical-align: middle;
            border: 1px solid #5c81e3;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
            background-color: #678ee7;
            background-image: linear-gradient(180deg, #678ee7, #5078df);
          }
        }
      }
    }
  }
}
.RecommendContainer-hot .recommendHeader .title {
  width: 1230px;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-size: 18px;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 8px 8px 0 0;
  color: #626262;
  background-color: #f3f3f3;
}

.RecommendContainer .recommendHeader .title {
  width: 1230px;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-size: 18px;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 8px 8px 0 0;
  color: #626262;
  background-color: #f3f3f3;
}
.recommendContext {
  display: flex;
  flex-wrap: wrap;
}
.recommendContext .bigImg {
  width: 610px;
  height: 430px;
  flex: 2;
}

/* Item 样式 */
.categoryItem {
  width: 305px;
  height: 430px;
  text-align: center;
  /* background-color: peru; */
  border: 1px solid #ccc;
  flex: 1;
}
.categoryItem .itemImg {
  width: 305px;
  height: 266px;
}
.categoryItem img {
  margin: 50px 49px 10px;
  width: 206px;
  height: 206px;
}
.categoryItem .title {
  font-size: 16px;
  color: #424242;
}
.categoryItem .desc {
  font-size: 12px;
  color: #d0d0d0;
  padding: 10px;
}
.categoryItem .detailAndCart {
  color: #d44d44;
  height: 30px;
  margin-top: 10px;
  position: relative;
}
.detailAndCart .price {
  height: 30px;
  font-size: 18px;
  font-weight: 700;
}
.detailAndCart .btn {
  display: none;
  height: 30px;
  font-size: 12px;
  position: absolute;
  left: 50px;
  top: 0;
}
.categoryItem:hover .detailAndCart .btn {
  display: block;
}
.categoryItem:hover .price {
  display: none;
}
.btn .detail {
  width: 100px;
  margin-right: 5px;
  color: #646464;
  border: 1px solid #e1e1e1;
  background-color: #fff;
}
.btn .detail:hover {
  background-color: #e1e1e1;
}
.btn .cart {
  width: 100px;
  color: #fff;
  border: #5c81e3;
  background-color: #678ee7;
}
.btn .cart:hover {
  background-color: #5078df;
}
/* 新品发布 */
.newProduct {
  display: flex;
  width: 1250px;
  /* height: 250px; */
  border: 1px solid transparent;
  border-radius: 5px;
  margin: 0 auto;
  /* background-color: chocolate; */
}
.newProduct li {
  flex: 1;
}
.newProduct li img {
  width: 305px;
  /* display: inline; */
  /* text-align: center; */
  height: 200px;
}
</style>
